<template>
	<div class="scorell">
		<div class="scorell-top">
			<h4>全部订单</h4>
			<aside>查看全部</aside>
		</div>
		<div class="scorell-bottom">
			<ul>
				<li v-for="item in list" :key='item.id'>
					<router-link to="/">
					<img :src='item.imgURL' />
					<strong>{{item.name}}</strong>
					</router-link>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default{
		name:'Scorell',
		data(){
			return{
				list:[
					{id:1,imgURL:'grzx/5.png',name:'待付款'},
					{id:2,imgURL:'grzx/6.png',name:'已付款'},
					{id:3,imgURL:'grzx/7.png',name:'待评价'},
					{id:4,imgURL:'grzx/8.png',name:'退款/售后'}
				]
			}
		}
	}
</script>

<style scoped>
	.scorell{
		width: 95%;
		height: 3rem;
		margin: 0 auto;
		position: relative;
	}
	.scorell-top{
		width: 100%;
		height: 0.8rem;
		background-color: white;
	}
	.scorell-top h4{
		display: inline-block;
		font-size: 0.4rem;
		padding: 0.3rem 0.25rem;
	}
	.scorell-top aside{
		display: inline-block;
		position: absolute;
		right: 0.3rem;
		top: 0.3rem;
		color:#bbb;
		font-size: 0.3rem;
	}
	.scorell-bottom ul{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 0.3rem;
	}
	.scorell-bottom ul li{
		width: 25%;
		text-align: center;
	}
	.scorell-bottom ul li img{
		width: 1rem;
		height: 1rem;
	}
	.scorell-bottom ul li strong{
		padding: 0.2rem 0;
		display: block;
	}
	a{
		text-decoration: none;
		color: #000000;
	}
</style>
